import React from 'react';

import {bangumiApi} from '../apis/bangumi.js';
import { Grid,Row,Col,Thumbnail,Panel} from 'react-bootstrap';
var Loading = require('react-loading');


var Home = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  getInitialState: function () {
    return {
		 slideshow:{list:[]} //番剧推荐
    };
  },
  componentWillMount: function() {
	this.setState({loaded:false});  
	
	bangumiApi.getBangumi()
      .then(function (ret) {
		 console.log(ret)
		this.setState({
		  slideshow :ret,
		  loaded:true
        })
		
      }.bind(this));	  
		
  },
  render: function() {
	 
	
    if(this.state.loaded)  
    return (
	 <Panel header="新番推荐">  
      <Grid>
        <Row>
		  {
			           this.state.slideshow.list.map(function (s) {
					         var url ="#/sp/"+s.spid+"/"+s.season_id;
                             return (
							    <Col xs={6} md={4}>
                                   <Thumbnail src={s.square_cover} alt="242x200"  href={url}>
                                        <h5>{s.title}</h5>
                                   </Thumbnail>
                                </Col>
							 )
                       })
		  }
          
        </Row>
	 </Grid>
	 </Panel>
    )
	else
		return (
	       
		      <Loading type='balls' color='#e3e3e3' />
           
	    )
  }
});

export {Home}